<template>
    <div class="home">
        <dv-full-screen-container>
            <div class="header-container">
                <dv-decoration-8 class="header-decoration" />
                <div class="title-wrapper">
                    <div class="main-title">湘潭电线电缆有限公司</div>
                    <span class="date-text">{{ nowDate }}</span>
                </div>
                <dv-decoration-8 class="header-decoration" :reverse="true" />
            </div>
            <div
                style="height: 40vh;box-sizing: border-box;padding: 0.5vh 0.5vw;display: flex;justify-content: space-between;">
                <!-- 左边 -->
                <div style="box-sizing: border-box;width:30%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">
                        
                    </dv-border-box-12>
                </div>
                <!-- 中间 -->
                <div style="box-sizing: border-box;width:40%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%;">
                        <div
                            style="display: flex;justify-content: center;align-items: center;text-align: center;font-size: 20px;font-weight: 600;padding: 4px;">
                            部分设备能耗信息表
                        </div>
                        <div style="display: flex;justify-content: center;align-items: center;text-align: center;">
                            <div class="matrix-table">
                                <table>
                                    <thead>
                                        <tr>
                                            <th v-for="(header, index) in ecHeader" :key="index">
                                                {{ header }}
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="(row, rowIndex) in currentecData" :key="rowIndex">
                                            <td v-for="(col, colIndex) in ecHeader" :key="colIndex">
                                                {{ row[col as keyof ecTableRow] }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </dv-border-box-12>
                </div>
                <!-- 右边 -->
                <div style="box-sizing: border-box;width:30%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">

                    </dv-border-box-12>
                </div>
            </div>

            <div
                style="height: 55vh;;box-sizing: border-box;padding: 0.5vh 0.5vw;display: flex;justify-content: space-between;">
                <!-- 左边 -->
                <div style="box-sizing: border-box;width:50%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%;">
                        
                    </dv-border-box-12>
                </div>
                <!-- <div style="box-sizing: border-box;width:40%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">
                        
                    </dv-border-box-12>
                </div> -->
                <!-- 右边 -->
                <div style="box-sizing: border-box;width:50%; height: 100%;">
                    <dv-border-box-12 style="box-sizing: border-box;width:100%; height: 100%">

                    </dv-border-box-12>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>


<script lang="ts" setup>

import { markRaw, reactive, ref, toRaw, onMounted, onBeforeMount, onBeforeUnmount, computed } from 'vue'
import type { Ref, Raw } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const nowDate: Ref<string> = ref('')
const timer: Ref<number> = ref()
const carouselTimer: Ref<number> = ref() // 轮播定时器
// 当前显示的页码
const currentPage = ref(0);
import Echarts from '@/components/ReEcharts.vue';

const option = reactive({
    title: {
        text: '设备运行状态图',
        left: 'center',
        top: '0px',
        textStyle: {
            color: '#CCE8FF' // 图表标题颜色
        }
    },
    tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(10, 30, 50, 0.8)', // 提示框背景
        textStyle: {
            color: '#E6F7FF' // 提示框文字颜色
        },
        borderColor: '#1890FF', // 提示框边框颜色
        borderWidth: 1
    },
    legend: {
        left: '10px',
        top: '2px',
        orient: 'vertical',
        icon: 'circle',
        color: '#555',
        textStyle: {
            color: '#BCE0FD' // 图例文字颜色
        },
        itemWidth: 10,
        itemHeight: 10,
        // 图例也需要显示数值的话，添加图例格式化
        formatter: function (name) {
            // 找到对应数据的value
            const item = option.series[0].data.find(item => item.name === name)
            return `${name}(${item?.value})`
        }
    },
    series: [
        {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
                { value: 1048, name: '开机数' },  // 保持name纯净
                { value: 735, name: '预热待机数' },
                { value: 580, name: '停机数' }
            ],
            // 标签格式化
            label: {
                formatter: function (params) {
                    return `${params.name}${params.value}`  // 动态拼接名称和数值
                },
                color: '#E0F2FF' // 标签文字颜色
            },
            // 提示那格式化
            tooltip: {
                formatter: function (params) {
                    return `${params.name}：${params.value}`
                }
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
});

onBeforeMount(() => {
    const formatDate = () => {
        const date = new Date();
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
    };

    nowDate.value = formatDate();
    timer.value = setInterval(() => {
        nowDate.value = formatDate();
    }, 1000) as unknown as number;

    // 初始化轮播定时器
    startCarousel();
})
// 轮播相关函数
const startCarousel = () => {
    // 清除已有定时器防止重复
    if (carouselTimer.value) {
        clearInterval(carouselTimer.value);
    }

    // 每5秒切换一次
    carouselTimer.value = setInterval(() => {
        nextPage();
    }, 5000) as unknown as number;
};

// 下一页
const nextPage = () => {
    currentPage.value = (currentPage.value + 1) % ecData.length;
};

// 当前显示的表格数据
const currentecData = computed(() => {
    return ecData[currentPage.value] || [];
});
// 当前显示的表格数据
const currentrepData = computed(() => {
    return repData[currentPage.value] || [];
});

// 组件卸载前清除定时器
onBeforeUnmount(() => {
    clearInterval(timer.value);
    clearInterval(carouselTimer.value);
})
interface ecTableRow {
    顺序: number;
    设备名称: string;
    本月当前电量: number;
    功率: number;
    A相电流: number;
    开机状态: string;
}
const ecHeader = ["顺序", "设备名称", "本月当前电量", "功率", "A相电流", "开机状态"];
const ecData: ecTableRow[][] = [[
    { 顺序: 1, 设备名称: "90+70押橡机", 本月当前电量: 63.6, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 2, 设备名称: "1000弓收线机(1)", 本月当前电量: 240, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 3, 设备名称: "1250单绞机", 本月当前电量: 70.8, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 4, 设备名称: "54盘笼绞", 本月当前电量: 0, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 5, 设备名称: "锅炉", 本月当前电量: 795.4, 功率: 3085.05, A相电流: 0, 开机状态: "停机" },
    { 顺序: 6, 设备名称: "65折型机", 本月当前电量: 2733, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 7, 设备名称: "90折型机", 本月当前电量: 2.4, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 8, 设备名称: "束丝机组A(10台)", 本月当前电量: 806.2, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 9, 设备名称: "45折型机", 本月当前电量: 763.2, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 10, 设备名称: "45折型机", 本月当前电量: 763.2, 功率: 0, A相电流: 0, 开机状态: "停机" },
], [
    { 顺序: 11, 设备名称: "束丝机组A(10台)", 本月当前电量: 63.6, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 12, 设备名称: "5折型机", 本月当前电量: 240, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 13, 设备名称: "1250单绞机", 本月当前电量: 70.8, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 14, 设备名称: "54盘笼绞", 本月当前电量: 0, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 15, 设备名称: "锅炉", 本月当前电量: 795.4, 功率: 3085.05, A相电流: 0, 开机状态: "停机" },
    { 顺序: 16, 设备名称: "5折型机", 本月当前电量: 2733, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 17, 设备名称: "90折型机", 本月当前电量: 2.4, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 18, 设备名称: "束丝机组A(10台)", 本月当前电量: 806.2, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 19, 设备名称: "45折型机", 本月当前电量: 763.2, 功率: 0, A相电流: 0, 开机状态: "停机" },
    { 顺序: 20, 设备名称: "锅炉", 本月当前电量: 763.2, 功率: 0, A相电流: 0, 开机状态: "停机" },
]];
interface repTableRow {
    顺序: number;
    设备名称: string;
    维修时间: string;
    维修人: string;
    完工时间: string;
}
const repHeader = ["顺序", "设备名称", "维修时间", "维修人", "完工时间"];
const repData: repTableRow[][] = [[
    { 顺序: 1, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 2, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 3, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 4, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 5, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 6, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 7, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 8, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 9, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 10, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
], [
    { 顺序: 11, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 12, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 13, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 14, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 15, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 16, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 17, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 18, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 19, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
    { 顺序: 20, 设备名称: "90+70押橡机", 维修时间: "63.6", 维修人: "0", 完工时间: "停机" },
]];
</script>
<style lang="scss" scoped>
.home {
    width: 100vw;
    height: 100vh;
    background-image: url('@/assets/bg/bg18.png');
    background-size: 100% 100%;
}

// 头部容器样式
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 6vh;
}

// 装饰元素样式
.header-decoration {
    width: 30%;
    height: 100%;
}

// 标题容器样式 - 确保居中
.title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40%;
    white-space: nowrap; // 防止标题和时间换行
}

// 主标题样式
.main-title {
    color: rgb(188, 220, 224);
    font-weight: bold;
    font-size: 30px;
    margin-right: 15px; // 标题和时间之间的间距
}

// 日期文本样式
.date-text {
    color: rgb(188, 220, 224);
    font-size: 20px;
}

.tip {
    text-align: left;
    padding: 1vh 0.5vw;
    display: flex;
    align-items: center;
    box-sizing: border-box;

    :nth-child(0) {
        font-size: 18px;
        font-weight: bold;
    }
}

.tip::before {
    content: '';
    background-color: rgb(24 124 183);
    border: 0.2vw solid rgb(24 124 183);
    height: 2.3vh;
    border-radius: 0.2vw;
    margin-right: 0.5vw;
    box-sizing: border-box;
}

.common-margin {
    padding: 0 1vw;
}

.matrix-table {
    width: 90%;
    overflow-x: auto;
    /* 处理横向溢出 */
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #fff;
    padding: 0px;
    text-align: center;
}
</style>
